<template>
  <view class="avatar-container">
    <image v-if="avatar" class="avatar-image" :src="avatar" mode="aspectFill">
    </image>
    <button
      v-if="!disabled"
      class="flex-col justify-center avatar-button"
      open-type="chooseAvatar"
      @chooseavatar="bindChooseAvatar"
    >
      {{ avatar ? "更换头像" : "点击选择头像" }}
    </button>
  </view>
</template>

<script>
export default {
  name: "Avatar",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    avatar: {
      type: String,
      default: "",
    },
  },
  emits: ["update:avatar"],
  methods: {
    bindChooseAvatar(e) {
      console.log("bindChooseAvatar", e);
      const tmpUrl = e.detail.avatarUrl;
      // 返回临时文件
      this.$emit("update:avatar", tmpUrl);
      console.log("Temp URL for avatar:", tmpUrl);
    },
  },
};
</script>

<style scoped lang="css">
.avatar-container {
  position: relative;
  width: 240rpx;
  height: 240rpx;
  border-radius: 50%;
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 2rpx 2rpx 8rpx #00000040;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-button {
  background-color: #ffffff;
  border-radius: 50%;
  width: 240rpx;
  height: 240rpx;
  font-size: 28rpx;
  color: #686868;

  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}
</style>